@use 'var';
@use 'mixins';
@use 'basis';
@use 'menu';
@use 'logo';
@use 'theme-switch';
@use 'navbar';
@use 'prism';
@use 'example';
@use 'table-contents';
@use 'hash-heading';

.lib-name {
  font-weight: 600;
}

.style-examples {
  li {
    margin-bottom: 0.25rem;
  }
  svg {
    margin-left: 0.375rem;
  }
}

.szh-app {
  padding-top: 4rem;
  line-height: 1.5;
  color: #212121;
  background-color: #fafbfc;
  @include mixins.scrollbar;

  &__toast {
    position: fixed;
    z-index: 200;
    left: 50%;
    top: 70px;
    transform: translateX(-50%);
    padding: 0.6rem 1.5rem;
    border-radius: var.$border-radius-medium;
    box-shadow:
      0px 3px 7px rgba(0, 0, 0, 0.133),
      0px 0.6px 2px rgba(0, 0, 0, 0.1);
    background-color: var.$btn-light;
    pointer-events: none;
    user-select: none;
  }

  &--theme-dark {
    color: var.$text-dark;
    background-color: var.$background-dark;
    @include mixins.scrollbar-dark;

    #content {
      .example__demo,
      .install-command,
      .promo-spot {
        background-color: var.$block-dark;
        border-color: var.$border-dark;
        &__title {
          color: var.$primary-dark;
        }
      }
    }

    .szh-app__toast {
      background-color: var.$btn-dark;
      border: 1px solid var.$border-dark;
      box-shadow: 0 2px 9px 3px rgba(0, 0, 0, 0.25);
    }
  }
}

#footer {
  @include mixins.flex-center('c', true);
  font-size: 0.9em;
  color: var.$secondary-light;
  padding: 2rem 1.5rem;
  text-align: center;
  background-color: #f6f6f6;
  @include mixins.border(border-top);
  p {
    margin: 0;
  }
  .build {
    color: #999;
    margin-top: 0.25rem;
  }

  .github {
    display: flex;
    margin-bottom: 1.25rem;
  }

  .github-btn {
    @include mixins.remove-focus;
    @include mixins.flex-center('c');
    @include mixins.border;
    @include mixins.transition((background-color, border-color));
    color: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    background-color: var.$btn-light-lv2;
    border-radius: var.$border-radius-medium;
    &:hover {
      text-decoration: none;
      background-color: var.$btn-light-lv3;
    }
  }

  .left {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background-color: var.$btn-light;
    &:hover {
      border-color: var.$border-hover-light;
    }
  }

  .right {
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .github-img {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
  }

  .szh-app--theme-dark & {
    color: var.$secondary-dark;
    background-color: var.$block-dark;
    border-color: var.$border-dark;
    .build {
      color: #777;
    }
    .github-btn {
      border-color: var.$border-dark;
      background-color: var.$block-dark;
      &:hover {
        background-color: var.$btn-dark-lv2;
      }
    }
    .left {
      background-color: var.$background-dark;
      &:hover {
        border-color: var.$border-hover-dark;
      }
    }
  }
}

#content {
  display: flex;
  align-items: flex-start;

  em {
    line-height: 1.75;
    border-radius: var.$border-radius-medium;
    background-color: var.$highlight-color;
    padding: 0.25rem 0.75rem;
    &.block {
      display: block;
      font-style: normal;
    }
  }

  h1,
  h2,
  h3 {
    margin-bottom: 0;
    color: var.$heading-light;
    .szh-app--theme-dark & {
      color: var.$heading-dark;
    }
  }

  h1 {
    margin-top: 3.5rem;
    margin-bottom: 0.5rem;
    font-size: 2rem;
    font-weight: bold;
  }
  h1 + .hash-heading__link {
    margin-bottom: 0.75rem;
  }

  h2 {
    margin-top: 2rem;
    font-size: 1.75rem;
    font-weight: bold;
  }

  h3 {
    margin-top: 1rem;
    font-size: 1.75rem;
    font-weight: 400;
  }

  .table {
    margin-bottom: 3rem;
  }

  .table-contents {
    position: sticky;
    left: 0;
  }

  .main-wrap {
    align-self: stretch;
    flex-grow: 1;
    @include mixins.border(border-left);
    .szh-app--theme-dark & {
      border-color: var.$border-dark;
    }
    @media (max-width: var.$bp-md) {
      border-left: none;
    }
  }

  main {
    margin: 0 auto;
    padding: 0 2rem 3rem 2rem;
    > .hash-heading:first-child {
      margin-top: -7rem;
    }

    @media (max-width: var.$bp-lg) {
      padding: 0 1rem 3rem 1rem;
    }
  }

  .right-section {
    flex: 0 0 11rem;
    position: sticky;
    padding: 1.5rem 0.75rem;
    @include mixins.border(border-left);
    @media (max-width: var.$bp-lg) {
      display: none;
    }
    .szh-app--theme-dark & {
      border-color: var.$border-dark;
    }
  }

  .promo-spot {
    display: block;
    color: inherit;
    background-color: white;
    margin-bottom: 1rem;
    padding: 0.75rem;
    border-radius: var.$border-radius-medium;
    @include mixins.border;
    @include mixins.transition(border-color);

    &:hover {
      text-decoration: none;
      background-color: transparent;
      border-color: var.$border-hover-light;
      .szh-app--theme-dark & {
        border-color: var.$border-hover-dark;
      }
    }

    // &--new {
    //   @include mixins.transition(all);
    //   background-color: var.$highlight-color;
    //   .szh-app--theme-dark & {
    //     background: center url('/react-menu/gdbk.jpeg');
    //     background-size: cover;
    //     color: #f9f9f9;
    //     border-color: var.$border-hover-dark;
    //     &:hover {
    //       border-color: var.$text-dark;
    //     }
    //   }
    // }

    // &__label {
    //   display: flex;
    //   align-items: center;
    //   font-size: 1rem;
    //   font-family: monospace;
    //   font-weight: bold;
    //   color: var.$primary-light;
    //   .szh-app--theme-dark & {
    //     color: var.$primary-dark;
    //   }
    //   svg {
    //     height: 1rem;
    //   }

    //   &--new {
    //     color: #e34c26;
    //     .szh-app--theme-dark & {
    //       color: #fbd06a;
    //     }
    //   }
    // }

    &__title {
      display: block;
      margin-bottom: 0.25rem;
      font-weight: bold;
      font-size: 1rem;
      color: var.$primary-light;
    }

    &__desc {
      font-weight: normal;
      font-size: 0.9rem;
      opacity: 0.9;
    }
  }

  .table-contents .promo-spot {
    width: 10rem;
    white-space: normal;
    margin: 1rem;

    &:first-child {
      margin-top: 3rem;
    }

    @media (min-width: var.$bp-lg) {
      display: none;
    }
  }
}

$toc-animation: 0.22s ease-out;

@keyframes slide-out {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: none;
  }
}

@keyframes fade-in {
  from {
    background-color: transparent;
  }
  to {
    background-color: var.$mask-color;
  }
}

// Hide table of contents
@media (max-width: var.$bp-md) {
  #header .navbar {
    .app-logo,
    .theme-switch {
      display: none;
    }
    &__toggle {
      display: inline-block;
    }
    &__github {
      margin-left: auto;
    }
  }

  #content {
    display: block;
    .table-contents {
      position: fixed;
      display: none;
      z-index: 200;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background-color: var.$mask-color;

      nav {
        background-color: var.$navbar-light;
        box-shadow: 4px 0 20px 4px var.$mask-color;
        min-width: 15rem;
      }

      &__header {
        display: flex;
        align-items: center;
        gap: 2rem;
        padding: 1rem 1.5rem;
        @include mixins.border(border-bottom);
      }

      .app-logo {
        text-decoration: none;
        color: var.$navbar-dark;
        &:hover {
          opacity: 0.75;
        }
      }

      .theme-switch {
        font-size: 1.5rem;
        margin-left: auto;
      }

      .contents-list-lv1::-webkit-scrollbar {
        width: 3px;
      }

      &--open {
        display: flex;
        animation: fade-in $toc-animation;
        nav {
          animation: slide-out $toc-animation;
        }
      }

      &--theme-dark {
        nav {
          background-color: var.$navbar-dark;
        }
        .app-logo {
          color: var.$navbar-light;
        }
        .table-contents__header {
          border-color: var.$border-dark;
        }
      }
    }

    main {
      border-left: none;
    }
  }
}

#usage {
  max-width: 1000px;
  .features {
    font-size: 1.2rem;
    @media (max-width: var.$bp-sm) {
      font-size: 1.1rem;
    }

    li {
      margin-bottom: 0.25rem;
    }
  }

  .install-command {
    position: relative;
    padding: 0.75rem 1rem;
    background-color: white;
    border-radius: var.$border-radius-medium;
    @include mixins.border;
    margin: 1rem 0;
    p {
      margin-bottom: 0;
    }
    .comment {
      color: var.$secondary-light;
      margin-top: 1.5rem;
      &:first-of-type {
        margin-top: 0;
      }
    }

    .sandbox {
      font-weight: bold;
      margin-top: 1.5rem;
    }
  }

  .sample-text {
    margin-left: 1.5rem;
  }

  // className prop example styles
  .my-menu {
    border: 2px solid green;
  }

  .my-menuitem {
    color: blue;
    background-color: #ee1;
  }

  .my-menuitem-hover {
    color: #ee1;
    background-color: #333;
  }
}

#documentation {
  li {
    margin-top: 0.5rem;
  }
  li code:first-child {
    margin-right: 0.5rem;
  }

  .keyboard {
    @include mixins.reset-list;
    margin-bottom: 2rem;

    li {
      margin-top: 0;
    }

    li span:first-child {
      display: inline-block;
      font-size: 0.875rem;
      border: 1px solid #212529;
      border-radius: var.$border-radius-small;
      background-color: white;
      box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
      padding: 0 0.5rem;
      margin: 0.25rem 0.5rem 0.25rem 0;
      .szh-app--theme-dark & {
        background-color: var.$btn-dark;
        border-color: var.$border-dark;
      }
    }
  }
}

#style-guide {
  h2 {
    font-weight: 500;
  }

  table ul {
    @include mixins.reset-list;
  }

  [aria-labelledby='menu'],
  [aria-labelledby='menu-item'],
  [aria-labelledby='others'] {
    th {
      min-width: 13.5rem;
    }
  }
}

#documentation,
#style-guide {
  max-width: 1400px;
}

#not-found {
  text-align: center;
  h1 {
    margin-top: 3rem;
  }
}
